Der Tag "INPUT" (ohne Endtag) hat viele Ausprägungen. Er kann für ein eigenständiges Element genutzt, als Teil eines Formulars (in Verbindung mit PHP) und in <fieldset> gebündelt werden. Hier spiele ich mit einigen Ausprägungen.
Für die Weiterverarbeitung in Formulare muss die Eigenschaft "name=xxxxx" eingegeben werden. Danach kann wie in JS-Ein-Ausgabe.HTML vorgegangen werden. Darum hier auch keine Spielerei zu PHP und Formulare.
Untersützung hole ich mir in diesen
Beschreibungen, oder fast das gleiche auf Englisch.
<input type=text>
So nützt das Feld natürlich nichts.
Um input auslesen zu können muss eine ID vergeben werden und eine Aktivität definiert werden ("listener"-Funktionen werden später behandelt)
<input type=text id="Ein1" onchange='Schreib("Aus1",document.getElementById("Ein1").value)'>
Nun wird bei Änderungen die vordefinierte Funktion Schreib(wo,was) gestartet.
Info: Folgende Aktivitäten (Events) sind möglich; onBlur, onChange, onClick, onFocus, onSelect, onSubmit
Man kann Events überall nutzen, zum Beispiel onClick im Tag HTML... schaue oben rechts auf der Seite, da werden die Maus-Klicks auf der Seite gezählt ;-)
Eingabe steuern
Size gibt die Breite des Fensterchens an (in "Zeichen", weniger als 4 geht nicht )
Maxlength gibt die Anzahl der maximal erlaubten Zeichen
<input type=text size=2 maxlength=4 >
Feld formatieren (natürlich mit style)
Beispiel:
<input type=text> style="font-size:20pt;background-color:red;color:yellow;">
Das Passwort wird verdeckt angezeigt, kann jedoch normal ausgelesen werden. (Achtung bei der PHP Übermittlung die POST und nicht die GET Methode benutzen)
<input type=Password id="Ein2" autocomplete="off">
Das gesendete Passwort:
Das Inputfeld vom Typ "Search" unterscheidet sich wenig vom Typ "Text". Der Vorteil, man kann eine Liste von Vorschläge anbieten. Wird eine Zeichenfolge innerhalb der Vorschläge gefunden werden diese angboten.
<input type=search list=Zahlen>
<datalist id=Zahlen>
<option value=Null>
<option value=Eins>
<option value=Zwei>
<option value=Drei>
</datalist>
Zahlen:
Will man jedoch ein richtiges "Dropdown" muss der "Select" Tag benutzt werden (hier wird mit "size" die Zeilenzahl gemeint. Ist dieser Wert 1 oder wird die Info weggelassen wird ein Dropdown generiert, bei Werte > 1 wird ein Auswahlfeld in der entsprechenden Höhe angezeigt)
<label>Zahlen:
<select style="width: 25em;">
<option>Null</option>
<option>Eins</option>
<option>Zwei</option>
<option>Drei</option>
</select>
</label>
Der Typ "Tel" hat eigentlich bloss auf mobile Geräte Wirkung, indem beim "aktivieren" den Zahleneingabeblock angezeigt wird
<input type="tel" placeholder="Landeswahl +41">
Geben Sie ihre Mobilnummer ein:
Hier wird eine vollständige URL erwartet und geprüft.
Die Auswirkung hängt vom Browser ab, zum Beispiel durch eine rote (NOK) oder grüne (OK) Umrandung
<input type="url" value="http://">
URL:
Hier wird eine vollständige E-Mailadresse erwartet und geprüft. (RegExp [a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)* )
Die Auswirkung hängt vom Browser ab, zum Beispiel durch eine rote (NOK) oder grüne (OK) Umrandung
<input type=Email>
E-Mail eingeben:
Hier wird eine Zahl erwartet, die auch durch Hoch/Tiefpfeil eingestellt werden kann. Man kann den Wert einschränken und die Wertabstufung bestimmen
Die Auswirkung hängt vom Browser ab, zum Beispiel durch eine rote (NOK) oder grüne (OK) Umrandung
<input type = "number" min="-15" max="45" step="0.5">
Temperatur in halben Graden:
Es wird ein Schieberegler dargestellt mit dem die Werte einstellen kann
Die Abstufung der Werte im eingegebenen Bereich, so wie die Reihenfolge muss rechnerisch über JS erfolgen (w = 100 - w oder w = w * .5)
Multipliziere die Werte (je 0 - 10)
Die Buttonbeschriftung kann einfach sein:
<input type = "radio" name="BeispielRadioButton"> Buttonbeschriftung 1
Buttonbeschriftung 1
Oder über den Label-Tag (in diesem Fall liegt der Vorteil darin, dass die ganze Buttonbeschriftung den Button beeinflusst
<input type="radio" name="BeispielRadioButton"> Buttonbeschriftung 2
<label for="BeispielButton2">Buttonbeschriftung</label>
Alles fast gleich wie im Typ "radio" jedoch können mehrere Werte ausgewählt werden
<input type="date" id="IDdate" onChange='Schreib(wo,was)' name="Ndate" value="1960-05-22" min="1910-01-01" max="2020-12-31">
Es kann zwar jedes Datum eingegeben werden, doch ist der Bereich ausserhalb min/max ausgeschwärzt und kann nicht durch Anklicken ausgewählt werden.
Je nach Browser ist die Eingabe verschieden sowohl werden "ungültige" Werte mit einer roten Umrandung angezeigt (Beispiel FireFox).
<input type="time" id="IDtime" onChange='Schreib(wo,was)' name="NTime" value="12:00" min="08:00" max="17:00">
Die Zeiteingabe ist wie beim Datum für jeden Browser etwas verschieden. Auch kann das 12/24-Stundenformat nicht erzwungen werden
Je nach Browser werden "ungültige" Werte mit einer roten Umrandung angezeigt (Beispiel FireFox).
Diese Types funktionieren je Browser anders oder überhaupt nicht, darum werde ich sie vorläufig nicht einbeziehen.
<input type="button" id="IDinBut" onclick='Schreib("Aus8","input type=button wurde geklickt")' name="NinBut" value="Aus Input">
<button type="submit" id="IDbut" onclick='Schreib("Aus8","\"button\" wurde geklickt")' name="Nbut" >Aus Button</button>
<input type="submit" id="IDinButSub" onclick='Schreib("Aus8","input type=submit wurde geklickt")' name="NinSub" value="Aus Input type submit">
Nur 3 Arten einen "Button" darzustellen bei "Submit" wird ein Formular in der zuvor in form-Header festgelegte Methode (GET/POST) übermittelt (siehe PHP)
<input type="image" src="JS-Input.jpg" id="IDimgI" onclick='Schreib("Aus9","input type=image wurde geklickt")' name="NimgI" alt="Aus Input">
<input type="submit" src="JS-Input.jpg" id="IDimgS" onclick='Schreib("Aus9","input type=submit wurde geklickt")' name="Nimgs" alt="Aus Submit">
Wie Button, aber mit eigenem Bild. SRC genügt nicht um das Bild zu laden.
Habe ich noch nicht begriffen ;-)
VON<imput type="hidden" value="Versteckt">BIS
Wird nicht angezeigt und hat den Zweck im Verborgenem Daten bei Formulare mitzugeben
VON
<input type="file" name="Dat">
Hat eigentlich nur Sinn wenn Daten an den Server über <Form> gesendet werden, da JS Daten nicht bearbeiten kann. Aber man kann ZB Dateien (Bilder, Texte) auswählen, die man in einem <iFrame> anzeigen kann
<input type="file" name="DatenM">
Es können auch mehrere Files ausgewählt werden. Aber ich weiss noch nicht, wie man das mit JS auswerten kann
<input type="color" id="Hintergrund" value="#ffffff">
für den Text
für den Hintergrund